import React, {Component} from "react";
import './Main.css'
import Typewriter from 'typewriter-effect';
import { useNavigate } from 'react-router-dom';
// import Typewriter from 'typewriter-effect/dist/core';

const Header = () => {
    return (
        <>
            <div className={'w-full border-b-gray-50 pl-10 pr-10 flex'}
                 style={{height: '80px', borderBottom: '1px solid gray', justifyContent: "space-between"}}>
                <div className={'text-white w-20 h-full flex content-center items-center cursor-pointer hover:text-red-500'}>Home</div>
                <div className={'text-white w-20 h-full flex content-center items-center cursor-pointer hover:text-red-500'}>About</div>
            </div>
        </>
    )
}

const ProjectItem = (
    { projectName, desc, navigateTo }: { projectName: string, desc: string, navigateTo: string }
) => {

    const navigate = useNavigate();
    const [hover, setHover] = React.useState(false);

    return (
        <div className={'w-full h-16 xl:h-32 md:pl-10 flex items-center'}>
            <div className={'flex'} onClick={() => navigate(navigateTo)}>
                <div className={'text-xl xl:text-6xl text-white hover:text-red-400 cursor-pointer'}
                     onMouseEnter={() => {setHover(true);}}
                     onMouseLeave={() => {setHover(false);}}
                     style={{fontFamily: 'degular-display, sans-serif', letterSpacing: '2px', fontWeight: '400'}}>
                    { projectName }
                </div>
                <div style={{
                    transition: "opacity 1.5s",  // 应用过渡效果到 opacity 属性
                    opacity: hover ? 1 : 0,   // 控制透明度
                    visibility: hover ? 'visible' : 'hidden',  // 确保元素在隐藏时不占用空间
                }}
                     className={'text-white flex flex-col justify-center ml-10 xl:pt-3 text-sm xl:text-xl'}>
                    <span>{ desc }</span>
                </div>
            </div>
        </div>
    )
}

const Content = (

) => {
    return (
        <>
            <div className={'h-auto md:pl-10'}>
                <div style={{minHeight: '300px', height: 'auto', paddingTop: '50px'}}>
                    <Typewriter
                        options={{cursorClassName: 'cursorClassName', loop: true}}
                        onInit={(typewriter) => {
                            typewriter.typeString(`<div style="width: 82%; min-width: 400px" class="min-w-20 text-2xl sm:text-3xl md:text-5xl xl:text-6xl 2xl:text-8xl mt-5 text-white pr-10">欢 迎 来 到 我 的 网 站 ！🤗</div>`,)
                                .typeString(`<div style="width: 82%; min-width: 400px" class="min-w-20 text-2xl sm:text-3xl md:text-4xl xl:text-5xl 2xl:text-6xl text-white mt-10 pr-10">Welcome to my website!🤗</div>`)
                                .typeString(`<div style="width: 82%; min-width: 400px" class="min-w-20 text-2xl sm:text-3xl md:text-4xl xl:text-5xl 2xl:text-6xl text-white mt-10 pr-10">From  卫志龙</div>`)
                                .pauseFor(2500)
                                .start();
                        }}
                    />
                </div>
                <button type="button"
                        className="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">
                    <div className={'flex'}>
                        <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                             viewBox="0 0 14 10">
                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"
                                  strokeWidth={'2'}
                                  d="M1 5h12m0 0L9 1m4 4L9 9"/>
                        </svg>
                        <span className={'ml-1 '}>
                            start
                            开始
                        </span>
                    </div>
                </button>
            </div>
            <div className={'bg-black pt-48 pb-20'}>
                <div style={{fontFamily: 'Inconsolata, monospace'}}
                     className={'text-white text-2xl font-bold pb-10 md:pl-10'}>
                    project list
                </div>
                <ProjectItem
                    projectName={'LoveNest'}
                    desc={'Web Application / React + SpringBoot （爱巢）'}
                    navigateTo='/loveNest'/>
                <div className={'divider'}/>
                <ProjectItem
                    projectName={'VideoCenter'}
                    desc={'Web Application / Vue + SpringBoot（视频中心）'}
                    navigateTo={'/videoCenter'}/>
                <div className={'divider'}/>
                <ProjectItem
                    projectName={'Blog'}
                    desc={'None （个人博客）'}
                    navigateTo={'/blog'}/>
                <div className={'divider'}/>
            </div>
        </>
    )
}

const Footer = () => {
    return (
        <></>
    )
}



interface MainState {

}

class Main extends Component<{}, MainState> {

    constructor(props: {}) {
        super(props);
        this.state = {

        }
    }

    render() {
        return (
            <div className={'w-full h-full bg-black'}>
                <Header/>
                <Content/>
                <Footer/>
            </div>
        )
    }
}

export default Main;